<template>
	<view class="">
		<view class="immediate-wrap-card dis" @click.stop="goInfo(item)" v-for="(item,index) in list">

			<view class="immediate-wrap-card-top dis">

				<view class="immediate-wrap-card-top-msg disCenter">
					<image :src="item.icon" mode=""></image>
					<text class="immediate-wrap-card-top-tit">{{item.name}}</text>
				</view>
				<view class="">
					<text class="immediate-wrap-card-top-tag" v-for="(itemm,index) in item.label.split(',')"
					>{{itemm}}</text>
				</view>


			</view>
			<view class="immediate-wrap-card-center dis">

				<view class="immediate-wrap-card-center-left">
					<view class="immediate-wrap-card-center-left-top">可借额度（元）</view>
					<view class="immediate-wrap-card-center-left-bot">
						{{item.quotaUpper}}
					<!-- {{item.quotaLower}}-{{item.quotaUpper}}
						<text style="font-size: 50rpx;">万</text> -->
					</view>
					

				</view>
				<view class="immediate-wrap-card-center-right">
					<view class="immediate-wrap-card-center-right-top">期数（月）</view>
					<view class="immediate-wrap-card-center-right-btm disCenter">
					{{item.usefulLife.replace(/.*-/,"")}}
					<text style=" margin-left: 4rpx;color: #333;font-weight: 500;font-size: 26rpx;">个月</text>
					</view>
					

				</view>
				<view class="immediate-wrap-card-center-right">
					<!-- <view class="immediate-wrap-card-center-right-btm1">
						<image src="/static/index/icon_hot.png" mode=""></image>
					
						<text class="immediate-wrap-card-center-right-btm1-tit">{{item.personCount}}</text>

						人申请
					</view> -->
					<view class="immediate-wrap-card-center-right-btn">立即申请</view>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		},
		methods: {
			goInfo(item) {
				this.$emit("goInfo", item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.immediate-wrap-card {
		// height: 400px;

		.immediate-wrap-card-center {
			.immediate-wrap-card-center-right {
				text-align: center;

				.immediate-wrap-card-center-right-top {
					    margin-bottom: 18rpx;
					font-size: 23rpx;
					font-weight: 500;
					color: #333;
				}

				.immediate-wrap-card-center-right-btn {
					// width: 172rpx;
					color: #fff;
					// height: 56rpx;
					padding: 14rpx 30rpx;
					// line-height: 56rpx;
					text-align: center;
					background: linear-gradient( 90deg, #03B0FE 0%, #278BE4 100%);
					box-shadow: 0px 8px 29px 0px #B2CBEA;
					border-radius: 100rpx;
					font-size: 26rpx;
					// margin-top: 20rpx;
				}

				.immediate-wrap-card-center-right-btm1 {
					display: flex;
					font-size: 24rpx;
					align-items: center;

					.immediate-wrap-card-center-right-btm1-tit {
						color: #FF0000;
					}

					image {
						width: 20rpx;
						height: 24rpx;
						vertical-align: middle;
						margin-right: 10rpx;
					}

				}

				.immediate-wrap-card-center-right-btm {
					font-family: DIN Alternate, DIN Alternate;
					font-weight: 500;
					font-size: 38rpx;

				}
			}

			.immediate-wrap-card-center-left {
				.immediate-wrap-card-center-left-top {
					font-size: 24rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 18rpx;
				}

				.immediate-wrap-card-center-left-bot {
					font-size: 40rpx;
					font-family: DIN Alternate, DIN Alternate;
					font-weight: 500;
					color: #333;

				}
			}

			margin: 12rpx 0 8rpx 0;
			border-top: 2rpx solid rgba(0,0,0,0.09);
			align-items: center;
			justify-content: space-between;
			padding-top: 24rpx;
		}

		.immediate-wrap-card-top {
			align-items: center;
			justify-content: space-between;
			.immediate-wrap-card-top-msg{
				
			}
			.immediate-wrap-card-top-tit {
				color: #333;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 550;
			}

			.immediate-wrap-card-top-tag {
				color: #FF6936;
				background: #FFF2DD;
				// border: 1px solid #FF0000;
				padding: 4rpx 12rpx;
				font-size: 22rpx;
				margin-left: 16rpx;
				border-radius: 4rpx;
				border-radius: 4rpx;
			}

			image {
				width: 62rpx;
				height: 62rpx;
				margin-right: 12rpx;
				border-radius: 16rpx;
			}
		}

		position: relative;
		flex-direction: column;
		border-radius: 20rpx;
		// color: #fff;
		margin: 24rpx 0;
		padding: 16rpx;
		justify-content: space-between;
		background: #fff;
		// background: linear-gradient(270deg, #C4E4FB 0%, #3470EB 100%);

	}
	.disCenter{
		display: flex;
		align-items: center;
	}
</style>